<template>
  <div class="container-setting">
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账号管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 按钮 -->
    <div class="mainBox">
      <div class="mainTitle">账号管理</div>
      <div class="mainEditor">
        <el-button type="success" size="small" icon="el-icon-edit-outline" @click="dialogAddVisible = true"
          >新增</el-button
        >
        <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteInformation">删除</el-button>
        <el-button type="warning" size="small" icon="el-icon-edit" @click="editorInformation">编辑</el-button>
      </div>
      <div class="mainTable">
        <!-- 表格 -->
        <el-table
         size="small"
          :data="tableData"
          border
          style="width: 100%"
          class="tabalBox"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <!-- <el-table-column type="index" width="45" label="序号"></el-table-column> -->
          <el-table-column prop="username" label="用户名">
          </el-table-column>
          <el-table-column prop="realname" label="姓名">
          </el-table-column>
          <el-table-column prop="phone" label="手机">
          </el-table-column>
          <el-table-column prop="clientName" label="公司名称"> </el-table-column>
          <el-table-column prop="status" label="状态"> </el-table-column>
          <el-table-column prop="auth" label="权限"> </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope" >
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
              <el-button
              size="mini"
              type="success"
              @click="handleChangePassWord(scope.$index, scope.row)"
              >修改密码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
      @size-change="handleUserSizeChange"
      @current-change="handleUserCurrentChange"
      :current-page="reqUserParams.page"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="reqUserParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    <el-dialog title="添加用户信息" :visible.sync="dialogAddVisible" width="476px" destroy-on-close>
      <add-management @closeDialog="closeAddUserDialog"></add-management>
    </el-dialog>
     <el-dialog title="编辑用户信息" :visible.sync="dialogEditeVisible" width="476px" @closed="closeEditorDialog">
      <edite-management @closeEditeDialog="closeEditeUserDialog" :edite-option="editeOption"></edite-management>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="dialogChangePassVisible" width="476px">
      <change-pass @closeChangeDialog="dialogChangePassVisible=false" :change-option="userId"> </change-pass>
    </el-dialog>
  </div>
</template>

<script>
import { getItem } from '../../utils/storage'
export default {
  name: 'setting',
  components: {
    AddManagement: () => import('./addmanagement/addmanagement.vue'),
    EditeManagement: () => import('./editeManagement/editeManagement'),
    ChangePass: () => import('./changePass/changePass')
  },
  data () {
    return {
      reqUserParams: {
        auth: null,
        clientId: null,
        name: '',
        page: 1,
        size: 10,
        status: null
      },
      tableData: [],
      dialogAddVisible: false,
      dialogEditeVisible: false,
      dialogChangePassVisible: false,
      total: null,
      isChecked: false,
      selectIndex: [],
      editeOption: {},
      userId: null
    }
  },
  mounted () {
    this.getUserList()
  },
  methods: {
    // 获取数据
    async getUserList () {
      this.reqUserParams.clientId = getItem('userInfo').clientId
      const res = await this.$http({
        url: '/api/platApi/user/findByCondition',
        method: 'post',
        data: this.reqUserParams
      })
      if (res.status === 200 && res.data.code === 1) {
        this.tableData = res.data.data.records
        this.tableData.forEach(el => {
          el.status = el.status === 1 ? '激活' : '未激活'
          el.auth = el.auth === 1 ? '管理员' : '操作员'
        })
        this.total = res.data.data.total
      } else {
        this.$message.error('查询失败')
      }
    },
    // 点击删除按钮，删除对应选项
    handleDelete (index, val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async () => {
        const res = await this.$http({
          url: '/api/platApi/user/deleteById',
          method: 'get',
          params: {
            id: val.id
          }
        })
        if (res.status === 200 && res.data.code === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          if (this.total === ((this.reqUserParams.size * (this.reqUserParams.page - 1)) + 1)) {
            this.$nextTick(function () {
              this.reqUserParams.page = this.reqUserParams.page - 1
              this.getUserList()
            })
          }
          this.getUserList()
        } else {
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击表上方删除按钮，删除选中的项
    async deleteInformation () {
      if (!this.isChecked) {
        this.$message({
          message: '还没有选择要删除的内容',
          type: 'warning'
        })
      } else if (this.selectIndex.length > 1) {
        this.$message({
          message: '每次只能删除一条信息',
          type: 'warning'
        })
      } else {
        const res = await this.$http({
          url: '/api/platApi/user/deleteById',
          method: 'get',
          params: {
            id: this.selectIndex[0]
          }
        })
        if (res.status === 200 && res.data.code === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          if (this.total === ((this.reqUserParams.size * (this.reqUserParams.page - 1)) + 1)) {
            this.$nextTick(function () {
              this.reqUserParams.page = this.reqUserParams.page - 1
              this.getUserList()
            })
          }
          this.getUserList()
        } else {
          this.$message.error('删除失败')
        }
      }
    },
    // 点击表上方的编辑
    editorInformation () {
      // 先判断是否选中
      if (!this.isChecked) {
        this.$message({
          message: '还没有选择要编辑的内容',
          type: 'warning'
        })
      } else if (this.selectIndex.length > 1) {
        this.$message({
          message: '每次只能编辑一条信息',
          type: 'warning'
        })
      } else {
        // 根据选中的选项的id,获取后台的相应数据，展示在表格中
        this.dialogEditeVisible = true
        this.editeOption = this.tableData.filter((item) => {
          return this.selectIndex[0] === item.id
        })[0]
      }
    },
    handleEdit (index, val) {
      // 点击编辑按钮，跳转出添加添加弹窗
      this.dialogEditeVisible = true
      this.editeOption = val
      // 将点击项的值传递给组件
    },
    // 点击添加信息
    addInformation () {
      this.dialogAddVisible = true
    },
    handleSelectionChange (val) {
      if (val.length === 0) {
        this.isChecked = false
      } else {
        this.isChecked = true
        this.selectIndex = []
        val.forEach((item, i) => {
          this.selectIndex.push(item.id)
        })
      }
    },
    // 点击提交，关闭弹框
    closeAddUserDialog () {
      this.dialogAddVisible = false
      this.getUserList()
    },
    closeEditeUserDialog () {
      this.dialogEditeVisible = false
      this.getUserList()
    },
    // 每页显示条数
    handleUserSizeChange (newSize) {
      this.reqUserParams.size = newSize
      this.getUserList()
    },
    handleUserCurrentChange (newPage) {
      this.reqUserParams.page = newPage
      this.getUserList()
    },
    // 修改密码
    handleChangePassWord (index, val) {
      this.dialogChangePassVisible = true
      this.userId = val.id
    },
    closeEditorDialog () {
      this.getUserList()
    }
  }
}
</script>

<style scoped lang="less">
.el-button {
  margin-top: 20px;
}
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
  // /deep/.cell{
  //   padding: 0,
  // }
  /deep/thead{
      color: #333;
  }
  // /deep/tr {
  //   padding: 0 !important;
  //   height: 10px;
  //   line-height: 10px;
  // }
  /deep/td {
    padding: 0 !important;
    height: 10px;
    line-height: 10px;
  }
  .el-button {
    margin: 5px;
  }
}
.el-dialog {
  width: 200px;
}
</style>
